<html lang='zh-CN'>
        <head >
        <meta charset='UTF-8'/>
<meta name='viewport' content='width=device-width, initial-scale=1.0'/>
<title >家庭任务管理系统</title>
<script src='https://res.gemcoder.com/js/reload.js'></script>
<script src='https://cdn.tailwindcss.com'></script>
<link href='https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css' rel='stylesheet'/>
<script src='https://cdn.bootcdn.net/ajax/libs/echarts/5.4.3/echarts.min.js'></script>
<script >tailwind.config = {
  theme: {
    extend: {
      colors: {
        primary: '#4F46E5',
        // 主色调：靛蓝色，代表信任和家庭和谐
        secondary: '#EC4899',
        // 辅助色：粉色，代表温暖和关爱
        accent: '#10B981',
        // 强调色：绿色，代表成长和奖励
        neutral: '#6B7280',
        // 中性色：灰色
        light: '#F9FAFB',
        // 浅色背景
        dark: '#1F2937' // 深色文本
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif']
      }
    }
  }
};</script>
<style type='text/tailwindcss'>
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .card-hover {
                @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
            }
            .btn-primary {
                @apply bg-primary text-white px-4 py-2 rounded-lg transition-all duration-300 hover:bg-primary/90 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-primary/50;
            }
            .btn-secondary {
                @apply bg-secondary text-white px-4 py-2 rounded-lg transition-all duration-300 hover:bg-secondary/90 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-secondary/50;
            }
            .btn-accent {
                @apply bg-accent text-white px-4 py-2 rounded-lg transition-all duration-300 hover:bg-accent/90 hover:shadow-md focus:outline-none focus:ring-2 focus:ring-accent/50;
            }
            .btn-outline {
                @apply border border-primary text-primary px-4 py-2 rounded-lg transition-all duration-300 hover:bg-primary/10 focus:outline-none focus:ring-2 focus:ring-primary/50;
            }
            .badge {
                @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
            }
        }
    </style>
    </head>
<body class='bg-gray-50 font-sans text-dark'>
        <!-- 顶部导航栏 -->
<header class='bg-white shadow-sm sticky top-0 z-50'>
        <div class='container mx-auto px-4 sm:px-6 lg:px-8'>
        <div class='flex justify-between h-16'>
        <div class='flex items-center'>
        <a href='javascript:void(0);' class='flex-shrink-0 flex items-center'>
        <i class='fas fa-home text-primary text-2xl mr-2'>
        </i>
<span class='text-xl font-bold text-primary'>
        家庭任务管理
    </span>
    </a>
    </div>
<div class='flex items-center space-x-4'>
        <!-- 用户角色切换 -->
<div class='relative'>
        <button id='roleToggle' class='flex items-center space-x-1 btn-outline'>
        <i class='fas fa-user-circle'>
        </i>
<span id='currentRole'>
        家长
    </span>
<i class='fas fa-chevron-down text-xs'>
        </i>
    </button>
<div id='roleDropdown' class='hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10'>
        <a href='javascript:void(0);' class='block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 role-option' data-role='parent'>
        家长模式
    </a>
<a href='javascript:void(0);' class='block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 role-option' data-role='child'>
        孩子模式
    </a>
    </div>
    </div>
<!-- 通知 -->
<button class='p-2 rounded-full hover:bg-gray-100 relative'>
        <i class='fas fa-bell text-gray-600'>
        </i>
<span class='absolute top-1 right-1 w-2 h-2 bg-red-500 rounded-full'>
        </span>
    </button>
<!-- 用户信息 -->
<div class='relative'>
        <button id='userMenuButton' class='flex items-center space-x-2'>
        <img src='https://design.gemcoder.com/staticResource/echoAiSystemImages/6890c7d3f05432963377210f8ca60cf7.png' alt='用户头像' class='w-8 h-8 rounded-full object-cover border-2 border-primary'/>
<span class='hidden md:inline font-medium'>
        张先生
    </span>
<i class='fas fa-chevron-down text-xs hidden md:inline'>
        </i>
    </button>
    </div>
    </div>
    </div>
    </div>
    </header>
<!-- 主要内容区 -->
<main class='container mx-auto px-4 sm:px-6 lg:px-8 py-6'>
        <!-- 家长模式内容 (默认显示) -->
<div id='parentMode' class='space-y-6'>
        <!-- 顶部统计卡片 -->
<div class='grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4'>
        <div class='bg-white rounded-xl shadow p-4 card-hover'>
        <div class='flex items-center justify-between'>
        <div >
        <p class='text-sm font-medium text-gray-500'>
        总任务数
    </p>
<h3 class='text-2xl font-bold mt-1'>
        24
    </h3>
    </div>
<div class='w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center'>
        <i class='fas fa-tasks text-primary text-xl'>
        </i>
    </div>
    </div>
<div class='mt-4 flex items-center text-sm'>
        <span class='text-green-500 flex items-center'>
        <i class='fas fa-arrow-up mr-1'>
        </i>
12%
    </span>
<span class='text-gray-500 ml-2'>
        较上月
    </span>
    </div>
    </div>
<div class='bg-white rounded-xl shadow p-4 card-hover'>
        <div class='flex items-center justify-between'>
        <div >
        <p class='text-sm font-medium text-gray-500'>
        已完成任务
    </p>
<h3 class='text-2xl font-bold mt-1'>
        18
    </h3>
    </div>
<div class='w-12 h-12 rounded-full bg-accent/10 flex items-center justify-center'>
        <i class='fas fa-check-circle text-accent text-xl'>
        </i>
    </div>
    </div>
<div class='mt-4 flex items-center text-sm'>
        <span class='text-green-500 flex items-center'>
        <i class='fas fa-arrow-up mr-1'>
        </i>
8%
    </span>
<span class='text-gray-500 ml-2'>
        较上月
    </span>
    </div>
    </div>
<div class='bg-white rounded-xl shadow p-4 card-hover'>
        <div class='flex items-center justify-between'>
        <div >
        <p class='text-sm font-medium text-gray-500'>
        发放奖励
    </p>
<h3 class='text-2xl font-bold mt-1'>
        120
    </h3>
    </div>
<div class='w-12 h-12 rounded-full bg-secondary/10 flex items-center justify-center'>
        <i class='fas fa-gift text-secondary text-xl'>
        </i>
    </div>
    </div>
<div class='mt-4 flex items-center text-sm'>
        <span class='text-green-500 flex items-center'>
        <i class='fas fa-arrow-up mr-1'>
        </i>
15%
    </span>
<span class='text-gray-500 ml-2'>
        较上月
    </span>
    </div>
    </div>
<div class='bg-white rounded-xl shadow p-4 card-hover'>
        <div class='flex items-center justify-between'>
        <div >
        <p class='text-sm font-medium text-gray-500'>
        家庭积分
    </p>
<h3 class='text-2xl font-bold mt-1'>
        560
    </h3>
    </div>
<div class='w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center'>
        <i class='fas fa-star text-yellow-500 text-xl'>
        </i>
    </div>
    </div>
<div class='mt-4 flex items-center text-sm'>
        <span class='text-green-500 flex items-center'>
        <i class='fas fa-arrow-up mr-1'>
        </i>
20%
    </span>
<span class='text-gray-500 ml-2'>
        较上月
    </span>
    </div>
    </div>
    </div>
<!-- 任务概览和图表 -->
<div class='grid grid-cols-1 lg:grid-cols-3 gap-6'>
        <div class='lg:col-span-2 bg-white rounded-xl shadow p-6'>
        <div class='flex justify-between items-center mb-6'>
        <h2 class='text-xl font-bold'>
        任务完成情况
    </h2>
<div class='flex space-x-2'>
        <button class='px-3 py-1 text-sm bg-primary/10 text-primary rounded-full'>
        本周
    </button>
<button class='px-3 py-1 text-sm text-gray-500 hover:bg-gray-100 rounded-full'>
        本月
    </button>
<button class='px-3 py-1 text-sm text-gray-500 hover:bg-gray-100 rounded-full'>
        全年
    </button>
    </div>
    </div>
<div id='taskChart' class='w-full h-64'>
        </div>
    </div>
<div class='bg-white rounded-xl shadow p-6'>
        <h2 class='text-xl font-bold mb-6'>
        家庭成员贡献
    </h2>
<div id='memberChart' class='w-full h-64'>
        </div>
    </div>
    </div>
<!-- 家长功能区 -->
<div class='grid grid-cols-1 lg:grid-cols-3 gap-6'>
        <!-- 发布任务按钮 -->
<div class='lg:col-span-3 flex justify-between items-center'>
        <h2 class='text-xl font-bold'>
        任务管理
    </h2>
<button id='createTaskBtn' class='btn-primary flex items-center'>
        <i class='fas fa-plus mr-2'>
        </i>
发布新任务
    </button>
    </div>
<!-- 任务列表 -->
<div class='lg:col-span-2 space-y-4'>
        <div class='bg-white rounded-xl shadow overflow-hidden'>
        <div class='p-4 border-b'>
        <div class='flex justify-between items-center'>
        <h3 class='font-bold'>
        任务列表
    </h3>
<div class='flex space-x-2'>
        <select class='form-select rounded-lg border-gray-300 text-sm focus:ring-primary focus:border-primary'>
        <option >
        所有任务
    </option>
<option >
        进行中
    </option>
<option >
        已完成
    </option>
<option >
        已过期
    </option>
    </select>
<div class='relative'>
        <input type='text' placeholder='搜索任务...' class='pl-8 pr-4 py-2 rounded-lg border border-gray-300 text-sm focus:ring-primary focus:border-primary'/>
<i class='fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400'>
        </i>
    </div>
    </div>
    </div>
    </div>
<div class='divide-y'>
        <!-- 任务项1 -->
<div class='p-4 hover:bg-gray-50 transition-colors'>
        <div class='flex justify-between items-start'>
        <div class='flex-1'>
        <div class='flex items-start'>
        <div class='mr-3 mt-1'>
        <div class='w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center'>
        <i class='fas fa-shopping-bag text-blue-500'>
        </i>
    </div>
    </div>
<div class='flex-1'>
        <div class='flex flex-wrap gap-2 mb-1'>
        <h4 class='font-semibold text-lg'>
        购买家庭日用品
    </h4>
<span class='badge bg-blue-100 text-blue-800'>
        多人单次
    </span>
    </div>
<p class='text-gray-600 text-sm mb-2'>
        购买洗衣液、洗洁精、卫生纸等家庭日用品，注意比价和质量。
    </p>
<div class='flex flex-wrap gap-3 text-sm text-gray-500'>
        <span class='flex items-center'>
        <i class='fas fa-user mr-1'>
        </i>
所有成员
    </span>
<span class='flex items-center'>
        <i class='fas fa-calendar mr-1'>
        </i>
2023-11-30前
    </span>
<span class='flex items-center'>
        <i class='fas fa-star text-yellow-500 mr-1'>
        </i>
奖励: 20积分
    </span>
    </div>
    </div>
    </div>
    </div>
<div class='ml-4 flex flex-col items-end'>
        <span class='badge bg-yellow-100 text-yellow-800 mb-2'>
        进行中
    </span>
<div class='flex space-x-2'>
        <button class='p-2 text-gray-500 hover:bg-gray-100 rounded-lg'>
        <i class='fas fa-edit'>
        </i>
    </button>
<button class='p-2 text-gray-500 hover:bg-gray-100 rounded-lg'>
        <i class='fas fa-ellipsis-v'>
        </i>
    </button>
    </div>
    </div>
    </div>
<!-- 任务参与情况 -->
<div class='mt-4 pt-4 border-t'>
        <div class='flex items-center justify-between mb-2'>
        <span class='text-sm text-gray-500'>
        参与情况
    </span>
<span class='text-sm font-medium'>
        2/3人已接取
    </span>
    </div>
<div class='flex -space-x-2'>
        <img src='https://design.gemcoder.com/staticResource/echoAiSystemImages/9edfde9bf5adc3c20be8a492ae6f9835.png' alt='参与者' class='w-8 h-8 rounded-full border-2 border-white object-cover'/>
<img src='https://design.gemcoder.com/staticResource/echoAiSystemImages/c8f91b29b68dea533edb9721e9688e55.png' alt='参与者' class='w-8 h-8 rounded-full border-2 border-white object-cover'/>
<div class='w-8 h-8 rounded-full border-2 border-white bg-gray-200 flex items-center justify-center text-xs font-medium'>
        +1
    </div>
    </div>
    </div>
    </div>
<!-- 任务项2 -->
<div class='p-4 hover:bg-gray-50 transition-colors'>
        <div class='flex justify-between items-start'>
        <div class='flex-1'>
        <div class='flex items-start'>
        <div class='mr-3 mt-1'>
        <div class='w-8 h-8 rounded-full bg-green-100 flex items-center justify-center'>
        <i class='fas fa-leaf text-green-500'>
        </i>
    </div>
    </div>
<div class='flex-1'>
        <div class='flex flex-wrap gap-2 mb-1'>
        <h4 class='font-semibold text-lg'>
        浇花与植物护理
    </h4>
<span class='badge bg-purple-100 text-purple-800'>
        单人重复
    </span>
    </div>
<p class='text-gray-600 text-sm mb-2'>
        每周一、三、五给家里的植物浇水，检查植物生长状况。
    </p>
<div class='flex flex-wrap gap-3 text-sm text-gray-500'>
        <span class='flex items-center'>
        <i class='fas fa-user mr-1'>
        </i>
小明
    </span>
<span class='flex items-center'>
        <i class='fas fa-redo-alt mr-1'>
        </i>
每周重复
    </span>
<span class='flex items-center'>
        <i class='fas fa-star text-yellow-500 mr-1'>
        </i>
奖励: 5积分/次
    </span>
    </div>
    </div>
    </div>
    </div>
<div class='ml-4 flex flex-col items-end'>
        <span class='badge bg-green-100 text-green-800 mb-2'>
        已完成
    </span>
<div class='flex space-x-2'>
        <button class='p-2 text-gray-500 hover:bg-gray-100 rounded-lg'>
        <i class='fas fa-edit'>
        </i>
    </button>
<button class='p-2 text-gray-500 hover:bg-gray-100 rounded-lg'>
        <i class='fas fa-ellipsis-v'>
        </i>
    </button>
    </div>
    </div>
    </div>
<!-- 任务完成情况 -->
<div class='mt-4 pt-4 border-t'>
        <div class='flex items-center justify-between mb-2'>
        <span class='text-sm text-gray-500'>
        完成记录
    </span>
<span class='text-sm font-medium'>
        本月已完成8次
    </span>
    </div>
<div class='flex flex-wrap gap-2'>
        <span class='px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full'>
        11/05
    </span>
<span class='px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full'>
        11/07
    </span>
<span class='px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full'>
        11/10
    </span>
<span class='px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full'>
        11/12
    </span>
<span class='px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full'>
        11/14
    </span>
<span class='px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full'>
        11/17
    </span>
<span class='px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full'>
        11/19
    </span>
<span class='px-2 py-1 bg-green-100 text-green-800 text-xs rounded-full'>
        11/21
    </span>
    </div>
    </div>
    </div>
<!-- 任务项3 -->
<div class='p-4 hover:bg-gray-50 transition-colors'>
        <div class='flex justify-between items-start'>
        <div class='flex-1'>
        <div class='flex items-start'>
        <div class='mr-3 mt-1'>
        <div class='w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center'>
        <i class='fas fa-book text-purple-500'>
        </i>
    </div>
    </div>
<div class='flex-1'>
        <div class='flex flex-wrap gap-2 mb-1'>
        <h4 class='font-semibold text-lg'>
        阅读计划 - 每月一本书
    </h4>
<span class='badge bg-blue-100 text-blue-800'>
        单人阶段
    </span>
    </div>
<p class='text-gray-600 text-sm mb-2'>
        每月阅读一本书并写读后感，培养阅读习惯。分为3个阶段：阅读、笔记、分享。
    </p>
<div class='flex flex-wrap gap-3 text-sm text-gray-500'>
        <span class='flex items-center'>
        <i class='fas fa-user mr-1'>
        </i>
小红
    </span>
<span class='flex items-center'>
        <i class='fas fa-calendar mr-1'>
        </i>
2023-11-30前
    </span>
<span class='flex items-center'>
        <i class='fas fa-star text-yellow-500 mr-1'>
        </i>
奖励: 阶段性
    </span>
    </div>
    </div>
    </div>
    </div>
<div class='ml-4 flex flex-col items-end'>
        <span class='badge bg-blue-100 text-blue-800 mb-2'>
        进行中
    </span>
<div class='flex space-x-2'>
        <button class='p-2 text-gray-500 hover:bg-gray-100 rounded-lg'>
        <i class='fas fa-edit'>
        </i>
    </button>
<button class='p-2 text-gray-500 hover:bg-gray-100 rounded-lg'>
        <i class='fas fa-ellipsis-v'>
        </i>
    </button>
    </div>
    </div>
    </div>
<!-- 任务阶段情况 -->
<div class='mt-4 pt-4 border-t'>
        <div class='flex items-center justify-between mb-2'>
        <span class='text-sm text-gray-500'>
        阶段进度
    </span>
<span class='text-sm font-medium'>
        2/3 阶段
    </span>
    </div>
<div class='space-y-2'>
        <div >
        <div class='flex justify-between text-xs mb-1'>
        <span >
        阅读完成
    </span>
<span >
        100%
    </span>
    </div>
<div class='w-full bg-gray-200 rounded-full h-2'>
        <div class='bg-green-500 h-2 rounded-full' style='width: 100%'>
        </div>
    </div>
    </div>
<div >
        <div class='flex justify-between text-xs mb-1'>
        <span >
        笔记完成
    </span>
<span >
        100%
    </span>
    </div>
<div class='w-full bg-gray-200 rounded-full h-2'>
        <div class='bg-green-500 h-2 rounded-full' style='width: 100%'>
        </div>
    </div>
    </div>
<div >
        <div class='flex justify-between text-xs mb-1'>
        <span >
        分享讨论
    </span>
<span >
        0%
    </span>
    </div>
<div class='w-full bg-gray-200 rounded-full h-2'>
        <div class='bg-gray-300 h-2 rounded-full' style='width: 0%'>
        </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
<div class='p-4 border-t flex justify-center'>
        <button class='text-primary hover:text-primary/80 font-medium flex items-center'>
        查看全部任务
<i class='fas fa-chevron-right ml-1 text-xs'>
        </i>
    </button>
    </div>
    </div>
    </div>
<!-- 待确认任务 -->
<div class='space-y-4'>
        <div class='bg-white rounded-xl shadow p-6'>
        <h3 class='font-bold text-lg mb-4'>
        待确认任务
    </h3>
<div class='space-y-4'>
        <!-- 待确认项1 -->
<div class='p-3 border border-gray-100 rounded-lg hover:border-primary/30 transition-colors'>
        <div class='flex items-start'>
        <img src='https://design.gemcoder.com/staticResource/echoAiSystemImages/10e391cb10d381bbbb16c3868f5a8bc4.png' alt='提交者' class='w-10 h-10 rounded-full object-cover mr-3'/>
<div class='flex-1'>
        <div class='flex justify-between'>
        <h4 class='font-medium'>
        整理书桌
    </h4>
<span class='text-xs text-gray-500'>
        今天 14:30
    </span>
    </div>
<p class='text-sm text-gray-500 mt-1'>
        小明提交了"整理书桌"任务完成申请
    </p>
<div class='mt-3 flex space-x-2'>
        <button class='flex-1 py-1 text-xs bg-green-100 text-green-800 rounded hover:bg-green-200 transition-colors'>
        确认完成
    </button>
<button class='flex-1 py-1 text-xs bg-gray-100 text-gray-800 rounded hover:bg-gray-200 transition-colors'>
        拒绝
    </button>
<button class='p-1 text-gray-500 hover:bg-gray-100 rounded'>
        <i class='fas fa-comment'>
        </i>
    </button>
    </div>
    </div>
    </div>
    </div>
<!-- 待确认项2 -->
<div class='p-3 border border-gray-100 rounded-lg hover:border-primary/30 transition-colors'>
        <div class='flex items-start'>
        <img src='https://design.gemcoder.com/staticResource/echoAiSystemImages/37533b1d3d3f9fb73e98f4f71593c2a3.png' alt='提交者' class='w-10 h-10 rounded-full object-cover mr-3'/>
<div class='flex-1'>
        <div class='flex justify-between'>
        <h4 class='font-medium'>
        浇花与植物护理
    </h4>
<span class='text-xs text-gray-500'>
        昨天 09:15
    </span>
    </div>
<p class='text-sm text-gray-500 mt-1'>
        小红提交了"浇花与植物护理"任务完成申请
    </p>
<div class='mt-3 flex space-x-2'>
        <button class='flex-1 py-1 text-xs bg-green-100 text-green-800 rounded hover:bg-green-200 transition-colors'>
        确认完成
    </button>
<button class='flex-1 py-1 text-xs bg-gray-100 text-gray-800 rounded hover:bg-gray-200 transition-colors'>
        拒绝
    </button>
<button class='p-1 text-gray-500 hover:bg-gray->100 rounded'>
        <i class='fas fa-comment'>
        </i>
    </button>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
<!-- 家庭成员 -->
<div class='bg-white rounded-xl shadow p-6'>
        <h3 class='font-bold text-lg mb-4'>
        家庭成员
    </h3>
<div class='space-y-4'>
        <div class='flex items-center justify-between'>
        <div class='flex items-center'>
        <img src='https://design.gemcoder.com/staticResource/echoAiSystemImages/10e391cb10d381bbbb16c3868f5a8bc4.png' alt='家庭成员' class='w-10 h-10 rounded-full object-cover mr-3'/>
<div >
        <h4 class='font-medium'>
        小明
    </h4>
<div class='flex items-center'>
        <span class='text-xs bg-blue-100 text-blue-800 px-2 py-0.5 rounded-full'>
        等级5
    </span>
<span class='text-xs text-gray-500 ml-2'>
        120积分
    </span>
    </div>
    </div>
    </div>
<div class='w-24 bg-gray-200 rounded-full h-2'>
        <div class='bg-blue-500 h-2 rounded-full' style='width: 75%'>
        </div>
    </div>
    </div>
<div class='flex items-center justify-between'>
        <div class='flex items-center'>
        <img src='https://design.gemcoder.com/staticResource/echoAiSystemImages/37533b1d3d3f9fb73e98f4f71593c2a3.png' alt='家庭成员' class='w-10 h-10 rounded-full object-cover mr-3'/>
<div >
        <h4 class='font-medium'>
        小红
    </h4>
<div class='flex items-center'>
        <span class='text-xs bg-pink-100 text-pink-800 px-2 py-0.5 rounded-full'>
        等级4
    </span>
<span class='text-xs text-gray-500 ml-2'>
        95积分
    </span>
    </div>
    </div>
    </div>
<div class='w-24 bg-gray-200 rounded-full h-2'>
        <div class='bg-pink-500 h-2 rounded-full' style='width: 60%'>
        </div>
    </div>
    </div>
<div class='flex items-center justify-between'>
        <div class='flex items-center'>
        <img src='https://design.gemcoder.com/staticResource/echoAiSystemImages/c7b43a6bbaf422cf8f09dbaba463378c.png' alt='家庭成员' class='w-10 h-10 rounded-full object-cover mr-3'/>
<div >
        <h4 class='font-medium'>
        爸爸
    </h4>
<div class='flex items-center'>
        <span class='text-xs bg-gray-100 text-gray-800 px-2 py-0.5 rounded-full'>
        家长
    </span>
<span class='text-xs text-gray-500 ml-2'>
        -
    </span>
    </div>
    </div>
    </div>
<div class='w-24 bg-gray-200 rounded-full h-2'>
        <div class='bg-gray-500 h-2 rounded-full' style='width: 100%'>
        </div>
    </div>
    </div>
<div class='flex items-center justify-between'>
        <div class='flex items-center'>
        <img src='https://design.gemcoder.com/staticResource/echoAiSystemImages/42a085766918566986fb91fb66d7f3b2.png' alt='家庭成员' class='w-10 h-10 rounded-full object-cover mr-3'/>
<div >
        <h4 class='font-medium'>
        妈妈
    </h4>
<div class='flex items-center'>
        <span class='text-xs bg-gray-100 text-gray-800 px-2 py-0.5 rounded-full'>
        家长
    </span>
<span class='text-xs text-gray-500 ml-2'>
        -
    </span>
    </div>
    </div>
    </div>
<div class='w-24 bg-gray-200 rounded-full h-2'>
        <div class='bg-gray-500 h-2 rounded-full' style='width: 100%'>
        </div>
    </div>
    </div>
    </div>
<button class='w-full mt-4 py-2 text-sm text-primary border border-primary/30 rounded-lg hover:bg-primary/5 transition-colors'>
        管理家庭成员
    </button>
    </div>
    </div>
    </div>
    </div>
<!-- 孩子模式内容 (默认隐藏) -->
<div id='childMode' class='hidden space-y-6'>
        <!-- 孩子个人信息 -->
<div class='bg-gradient-to-r from-primary to-purple-600 rounded-xl shadow p-6 text-white'>
        <div class='flex flex-col md:flex-row items-center md:items-start'>
        <img src='https://design.gemcoder.com/staticResource/echoAiSystemImages/732ad5ebbfd5b3b4664f2cdd977530ad.png' alt='个人头像' class='w-20 h-20 rounded-full object-cover border-4 border-white/30 mb-4 md:mb-0 md:mr-6'/>
<div class='text-center md:text-left'>
        <h2 class='text-2xl font-bold'>
        小明
    </h2>
<div class='flex items-center justify-center md:justify-start mt-1'>
        <span class='bg-white/20 px-3 py-1 rounded-full text-sm font-medium'>
        等级 5
    </span>
<div class='ml-3 flex items-center'>
        <i class='fas fa-star text-yellow-400 mr-1'>
        </i>
<span >
        120 积分
    </span>
    </div>
    </div>
<div class='mt-4 w-full md:w-64 bg-white/20 rounded-full h-2'>
        <div class='bg-white h-2 rounded-full' style='width: 75%'>
        </div>
    </div>
<div class='mt-1 text-sm flex justify-between'>
        <span >
        150/200 经验值
    </span>
<span >
        距离升级: 50经验
    </span>
    </div>
    </div>
<div class='mt-6 md:mt-0 md:ml-auto flex space-x-3'>
        <button class='bg-white text-primary px-4 py-2 rounded-lg font-medium hover:bg-white/90 transition-colors'>
        <i class='fas fa-gift mr-1'>
        </i>
积分商城
    </button>
    </div>
    </div>
<!-- 徽章展示 -->
<div class='mt-8'>
        <h3 class='text-lg font-semibold mb-3'>
        我的徽章
    </h3>
<div class='flex space-x-4'>
        <div class='flex flex-col items-center'>
        <div class='w-12 h-12 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600'>
        <i class='fas fa-trophy text-xl'>
        </i>
    </div>
<span class='text-xs mt-1'>
        勤劳小蜜蜂
    </span>
    </div>
<div class='flex flex-col items-center'>
        <div class='w-12 h-12 rounded-full bg-blue-100 flex items-center justify-center text-blue-600'>
        <i class='fas fa-book text-xl'>
        </i>
    </div>
<span class='text-xs mt-1'>
        阅读达人
    </span>
    </div>
<div class='flex flex-col items-center'>
        <div class='w-12 h-12 rounded-full bg-green-100 flex items-center justify-center text-green-600'>
        <i class='fas fa-leaf text-xl'>
        </i>
    </div>
<span class='text-xs mt-1'>
        环保卫士
    </span>
    </div>
<div class='flex flex-col items-center'>
        <div class='w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center text-gray-400'>
        <i class='fas fa-lock text-xl'>
        </i>
    </div>
<span class='text-xs mt-1 text-gray-400'>
        未解锁
    </span>
    </div>
<div class='flex flex-col items-center'>
        <div class='w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center text-gray-400'>
        <i class='fas fa-lock text-xl'>
        </i>
    </div>
<span class='text-xs mt-1 text-gray-400'>
        未解锁
    </span>
    </div>
    </div>
    </div>
    </div>
<!-- 孩子功能区 -->
<div class='grid grid-cols-1 lg:grid-cols-3 gap-6'>
        <!-- 孩子任务列表 -->
<div class='lg:col-span-2 space-y-4'>
        <div class='bg-white rounded-xl shadow overflow-hidden'>
        <div class='p-4 border-b'>
        <div class='flex justify-between items-center'>
        <h3 class='font-bold'>
        我的任务
    </h3>
<div class='flex space-x-2'>
        <button class='px-3 py-[6px] text-sm bg-primary/10 text-primary rounded-full'>
        进行中
    </button>
<button class='px-3 py-[6px] text-sm text-gray-500 hover:bg-gray-100 rounded-full'>
        已完成
    </button>
<button class='px-3 py-[6px] text-sm text-gray-500 hover:bg-gray-100 rounded-full'>
        已过期
    </button>
    </div>
    </div>
    </div>
<div class='divide-y'>
        <!-- 孩子任务项1 -->
<div class='p-4 hover:bg-gray-50 transition-colors'>
        <div class='flex justify-between items-start'>
        <div class='flex-1'>
        <div class='flex items-start'>
        <div class='mr-3 mt-1'>
        <div class='w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center'>
        <i class='fas fa-book text-purple-500'>
        </i>
    </div>
    </div>
<div class='flex-1'>
        <div class='flex flex-wrap gap-2 mb-1'>
        <h4 class='font-semibold text-lg'>
        阅读计划 - 每月一本书
    </h4>
<span class='badge bg-blue-100 text-blue-800'>
        阶段任务
    </span>
    </div>
<p class='text-sm text-gray-500 mb-2'>
        每月阅读一本书并写读后感，培养阅读习惯。分为3个阶段：阅读、笔记、分享。
    </p>
<div class='flex flex-wrap gap-3 text-sm text-gray-500'>
        <span class='flex items-center'>
        <i class='fas fa-calendar mr-1'>
        </i>
2023-11-30前
    </span>
<span class='flex items-center'>
        <i class='fas fa-star text-yellow-500 mr-1'>
        </i>
奖励: 阶段性
    </span>
    </div>
    </div>
    </div>
    </div>
<div class='ml-4 flex flex-col items-end'>
        <span class='badge bg-blue-100 text-blue-800 mb-2'>
        进行中
    </span>
    </div>
    </div>
<!-- 任务阶段情况 -->
<div class='mt-4 pt-4 border-t'>
        <div class='flex items-center justify-between mb-2'>
        <span class='text-sm text-gray-500'>
        阶段进度
    </span>
<span class='text-sm font-medium'>
        2/3 阶段
    </span>
    </div>
<div class='space-y-2'>
        <div >
        <div class='flex justify-between text-xs mb-1'>
        <span >
        阅读完成
    </span>
<span >
        100%
    </span>
    </div>
<div class='w-full bg-gray-200 rounded-full h-2'>
        <div class='bg-green-500 h-2 rounded-full' style='width: 100%'>
        </div>
    </div>
    </div>
<div >
        <div class='flex justify-between text-xs mb-1'>
        <span >
        笔记完成
    </span>
<span >
        100%
    </span>
    </div>
<div class='w-full bg-gray-200 rounded-full h-2'>
        <div class='bg-green-500 h-2 rounded-full' style='width: 100%'>
        </div>
    </div>
    </div>
<div >
        <div class='flex justify-between text-xs mb-1'>
        <span >
        分享讨论
    </span>
<span >
        0%
    </span>
    </div>
<div class='w-full bg-gray-200 rounded-full h-2'>
        <div class='bg-gray-300 h-2 rounded-full' style='width: 0%'>
        </div>
    </div>
    </div>
    </div>
<div class='mt-4 flex justify-end'>
        <button class='btn-primary text-sm py-1 px-3'>
        提交阶段成果
    </button>
    </div>
    </div>
    </div>
<!-- 孩子任务项2 -->
<div class='p-4 hover:bg-gray-50 transition-colors'>
        <div class='flex justify-between items-start'>
        <div class='flex-1'>
        <div class='flex items-start'>
        <div class='mr-3 mt-1'>
        <div class='w-8 h-8 rounded-full bg-green-100 flex items-center justify-center'>
        <i class='fas fa-leaf text-green-500'>
        </i>
    </div>
    </div>
<div class='flex-1'>
        <div class='flex flex-wrap gap-2 mb-1'>
        <h4 class='font-semibold text-lg'>
        浇花与植物护理
    </h4>
<span class='badge bg-purple-100 text-purple-800'>
        重复任务
    </span>
    </div>
<p class='text-sm text-gray-500 mb-2'>
        每周一、三、五给家里的植物浇水，检查植物生长状况。
    </p>
<div class='flex flex-wrap gap-3 text-sm text-gray-500'>
        <span class='flex items-center'>
        <i class='fas fa-redo-alt mr-1'>
        </i>
每周重复
    </span>
<span class='flex items-center'>
        <i class='fas fa-star text-yellow-500 mr-1'>
        </i>
奖励: 5积分/次
    </span>
    </div>
    </div>
    </div>
    </div>
<div class='ml-4 flex flex-col items-end'>
        <span class='badge bg-yellow-100 text-yellow-800 mb-2'>
        待完成
    </span>
    </div>
    </div>
<!-- 任务操作 -->
<div class='mt-4 pt-4 border-t flex justify-between'>
        <div class='text-sm text-gray-500'>
        <i class='fas fa-calendar-alt mr-1'>
        </i>
下次完成时间: 11月24日
    </div>
<button class='btn-primary text-sm py-1 px-3'>
        标记为完成
    </button>
    </div>
    </div>
<!-- 孩子任务项3 -->
<div class='p-4 hover:bg-gray-50 transition-colors'>
        <div class='flex justify-between items-start'>
        <div class='flex-1'>
        <div class='flex items-start'>
        <div class='mr-3 mt-1'>
        <div class='w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center'>
        <i class='fas fa-shopping-bag text-blue-500'>
        </i>
    </div>
    </div>
<div class='flex-1'>
        <div class='flex flex-wrap gap-2 mb-1'>
        <h4 class='font-semibold text-lg'>
        购买家庭日用品
    </h4>
<span class='badge bg-blue-100 text-blue-800'>
        多人任务
    </span>
    </div>
<p class='text-sm text-gray-500 mb-2'>
        购买洗衣液、洗洁精、卫生纸等家庭日用品，注意比价和质量。
    </p>
<div class='flex flex-wrap gap-3 text-sm text-gray-500'>
        <span class='flex items-center'>
        <i class='fas fa-users mr-1'>
        </i>
3人参与
    </span>
<span class='flex items-center'>
        <i class='fas fa-calendar mr-1'>
        </i>
2023-11-30前
    </span>
<span class='flex items-center'>
        <i class='fas fa-star text-yellow-500 mr-1'>
        </i>
奖励: 20积分
    </span>
    </div>
    </div>
    </div>
    </div>
<div class='ml-4 flex flex-col items-end'>
        <span class='badge bg-yellow-100 text-yellow-800 mb-2'>
        进行中
    </span>
    </div>
    </div>
<!-- 任务参与情况 -->
<div class='mt-4 pt-4 border-t'>
        <div class='flex items-center justify-between mb-2'>
        <span class='text-sm text-gray-500'>
        参与情况
    </span>
<span class='text-sm font-medium'>
        2/3人已接取
    </span>
    </div>
<div class='flex -space-x-2'>
        <img src='https://design.gemcoder.com/staticResource/echoAiSystemImages/9edfde9bf5adc3c20be8a492ae6f9835.png' alt='参与者' class='w-8 h-8 rounded-full border-2 border-white object-cover'/>
<img src='https://design.gemcoder.com/staticResource/echoAiSystemImages/c8f91b29b68dea533edb9721e9688e55.png' alt='参与者' class='w-8 h-8 rounded-full border-2 border-white object-cover'/>
<div class='w-8 h-8 rounded-full border-2 border-white bg-gray-200 flex items-center justify-center text-xs font-medium'>
        +1
    </div>
    </div>
<div class='mt-4 flex justify-end'>
        <button class='btn-primary text-sm py-1 px-3'>
        标记为完成
    </button>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
<!-- 可用任务和排行榜 -->
<div class='space-y-4'>
        <!-- 可接取任务 -->
<div class='bg-white rounded-xl shadow p-6'>
        <h3 class='font-bold text-lg mb-4'>
        可接取任务
    </h3>
<div class='space-y-4'>
        <!-- 可接取任务1 -->
<div class='p-3 border border-gray-100 rounded-lg hover:border-primary/30 transition-colors'>
        <div class='flex justify-between items-start'>
        <div >
        <h4 class='font-medium'>
        帮忙洗碗
    </h4>
<p class='text-sm text-gray-500 mt-1'>
        晚餐后帮忙清洗餐具和厨房台面
    </p>
<div class='mt-2 flex items-center text-sm text-gray-500'>
        <i class='fas fa-star text-yellow-500 mr-1'>
        </i>
<span >
        奖励: 10积分
    </span>
    </div>
    </div>
<button class='px-3 py-1 text-xs bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors'>
        接取任务
    </button>
    </div>
    </div>
<!-- 可接取任务2 -->
<div class='p-3 border border-gray-100 rounded-lg hover:border-primary/30 transition-colors'>
        <div class='flex justify-between items-start'>
        <div >
        <h4 class='font-medium'>
        整理衣柜
    </h4>
<p class='text-sm text-gray-500 mt-1'>
        整理自己的衣柜，分类叠放衣物
    </p>
<div class='mt-2 flex items-center text-sm text-gray-500'>
        <i class='fas fa-star text-yellow-500 mr-1'>
        </i>
<span >
        奖励: 15积分
    </span>
    </div>
    </div>
<button class='px-3 py-1 text-xs bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors'>
        接取任务
    </button>
    </div>
    </div>
<!-- 可接取任务3 -->
<div class='p-3 border border-gray-100 rounded-lg hover:-border-primary/30 transition-colors'>
        <div class='flex justify-between items-start'>
        <div >
        <h4 class='font-medium'>
        垃圾分类
    </h4>
<p class='text-sm text-gray-500 mt-1'>
        正确分类家庭垃圾，学习环保知识
    </p>
<div class='mt-2 flex items-center text-sm text-gray-500'>
        <i class='fas fa-star text-yellow-500 mr-1'>
        </i>
<span >
        奖励: 8积分/天
    </span>
    </div>
    </div>
<button class='px-3 py-1 text-xs bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors'>
        接取任务
    </button>
    </div>
    </div>
    </div>
    </div>
<!-- 家庭排行榜 -->
<div class='bg-white rounded-xl shadow p-6'>
        <h3 class='font-bold text-lg mb-4'>
        家庭排行榜
    </h3>
<div class='space-y-4'>
        <!-- 排行1 -->
<div class='flex items-center'>
        <div class='w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center text-yellow-600 font-bold text-sm'>
        1
    </div>
<img src='https://design.gemcoder.com/staticResource/echoAiSystemImages/37533b1d3d3f9fb73e98f4f71593c2a3.png' alt='排行成员' class='w-10 h-10 rounded-full object-cover mx-3'/>
<div class='flex-1'>
        <div class='flex justify-between'>
        <h4 class='font-medium text-sm'>
        小红
    </h4>
<span class='text-sm font-bold'>
        145积分
    </span>
    </div>
<div class='w-full bg-gray-100 rounded-full h-1.5 mt-1'>
        <div class='bg-pink-500 h-1.5 rounded-full' style='width: 85%'>
        </div>
    </div>
    </div>
    </div>
<!-- 排行2 -->
<div class='flex items-center'>
        <div class='w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 font-bold text-sm'>
        2
    </div>
<img src='https://design.gemcoder.com/staticResource/echoAiSystemImages/10e391cb10d381bbbb16c3868f5a8bc4.png' alt='排行成员' class='w-10 h-10 rounded-full object-cover mx-3'/>
<div class='flex-1'>
        <div class='flex justify-between'>
        <h4 class='font-medium text-sm'>
        小明
    </h4>
<span class='text-sm font-bold'>
        120积分
    </span>
    </div>
<div class='w-full bg-gray-100 rounded-full h-1.5 mt-1'>
        <div class='bg-blue-500 h-1.5 rounded-full' style='width: 75%'>
        </div>
    </div>
    </div>
    </div>
<!-- 排行3 -->
<div class='flex items-center'>
        <div class='w-8 h-8 rounded-full bg-orange-100 flex items-center justify-center text-orange-600 font-bold text-sm'>
        3
    </div>
<img src='https://design.gemcoder.com/staticResource/echoAiSystemImages/42a085766918566986fb91fb66d7f3b2.png' alt='排行成员' class='w-10 h-10 rounded-full object-cover mx-3'/>
<div class='flex-1'>
        <div class='flex justify-between'>
        <h4 class='font-medium text-sm'>
        妈妈
    </h4>
<span class='text-sm font-bold'>
        90积分
    </span>
    </div>
<div class='w-full bg-gray-100 rounded-full h-1.5 mt-1'>
        <div class='bg-gray-500 h-1.5 rounded-full' style='width: 60%'>
        </div>
    </div>
    </div>
    </div>
<!-- 排行4 -->
<div class='flex items-center'>
        <div class='w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center text-gray-500 font-bold text-sm'>
        4
    </div>
<img src='https://design.gemcoder.com/staticResource/echoAiSystemImages/c7b43a6bbaf422cf8f09dbaba463378c.png' alt='排行成员' class='w-10 h-10 rounded-full object-cover mx-3'/>
<div class='flex-1'>
        <div class='flex justify-between'>
        <h4 class='font-medium text-sm'>
        爸爸
    </h4>
<span class='text-sm font-bold'>
        75积分
    </span>
    </div>
<div class='w-full bg-gray-100 rounded-full h-1.5 mt-1'>
        <div class='bg-gray-500 h-1.5 rounded-full' style='width: 50%'>
        </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </main>
<!-- 发布任务模态框 -->
<div id='taskModal' class='fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center'>
        <div class='bg-white rounded-xl shadow-xl w-full max-w-2xl max-h-[90vh] overflow-y-auto'>
        <div class='p-6 border-b'>
        <div class='flex justify-between items-center'>
        <h2 class='text-xl font-bold'>
        发布新任务
    </h2>
<button id='closeModal' class='text-gray-500 hover:text-gray-700'>
        <i class='fas fa-times text-xl'>
        </i>
    </button>
    </div>
    </div>
<div class='p-6'>
        <form id='taskForm'>
        <div class='grid grid-cols-1 md:grid-cols-2 gap-4 mb-4'>
        <div class='md:col-span-2'>
        <label class='block text-sm font-medium text-gray-700 mb-1'>
        任务标题
    </label>
<input type='text' class='w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary' placeholder='输入任务标题'/>
    </div>
<div class='md:col-span-2'>
        <label class='block text-sm font-medium text-gray-700 mb-1'>
        任务描述
    </label>
<textarea rows='3' class='w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary' placeholder='详细描述任务内容和要求'>
        </textarea>
    </div>
<div >
        <label class='block text-sm font-medium text-gray-700 mb-1'>
        任务类型
    </label>
<select class='w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary'>
        <option >
        单人单次任务
    </option>
<option >
        单人重复任务
    </option>
<option >
        多人单次任务
    </option>
<option >
        多人重复任务
    </option>
<option >
        阶段性任务
    </option>
    </select>
    </div>
<div >
        <label class='block text-sm font-medium text-gray-700 mb-1'>
        任务期限
    </label>
<input type='date' class='w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary'/>
    </div>
<div >
        <label class='block text-sm font-medium text-gray-700 mb-1'>
        任务奖励
    </label>
<select class='w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary'>
        <option >
        一次性奖励
    </option>
<option >
        多次奖励
    </option>
<option >
        阶段性奖励
    </option>
>
    </select>
    </div>
<div >
        <label class='block text-sm font-medium text-gray-700 mb-1'>
        积分奖励
    </label>
<input type='number' min='0' class='w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-primary focus:border-primary' placeholder='输入积分数量'/>
    </div>
<div class='md:col-span-2'>
        <label class='block text-sm font-medium text-gray-700 mb-1'>
        指定成员
    </label>
<div class='grid grid-cols-2 sm:grid-cols-4 gap-3'>
        <label class='flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-primary/30 transition-colors'>
        <input type='checkbox' class='mr-2 text-primary focus:ring-primary'/>
<span >
        小明
    </span>
    </label>
<label class='flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-primary/30 transition-colors'>
        <input type='checkbox' class='mr-2 text-primary focus:ring-primary'/>
<span >
        小红
    </span>
    </label>
<label class='flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-primary/30 transition-colors'>
        <input type='checkbox' class='mr-2 text-primary focus:ring-primary'/>
<span >
        爸爸
    </span>
    </label>
<label class='flex items-center p-3 border border-gray-200 rounded-lg cursor-pointer hover:border-primary/30 transition-colors'>
        <input type='checkbox' class='mr-2 text-primary focus:ring-primary'/>
<span >
        妈妈
    </span>
    </label>
    </div>
    </div>
<!-- 阶段任务配置 (默认隐藏) -->
<div id='stageConfig' class='md:col-span-2 hidden'>
        <label class='block text-sm font-medium text-gray-700 mb-2'>
        阶段设置
    </label>
<div class='space-y-3'>
        <div class='flex items-center'>
        <input type='text' class='flex-1 px-4 py-2 border border-gray-300 rounded-l-lg focus:ring-primary focus:border-primary' placeholder='阶段1名称'/>
<input type='number' min='0' class='w-24 px-4 py-2 border-t border-b border-gray-300 focus:ring-primary focus:border-primary' placeholder='积分'/>
<button class='p-2 border border-gray-300 rounded-r-lg bg-gray-50 hover:bg-gray-100'>
        <i class='fas fa-trash text-gray-500'>
        </i>
    </button>
    </div>
<div class='flex items-center'>
        <input type='text' class='flex-1 px-4 py-2 border border-gray-300 rounded-l-lg focus:not(:placeholder-shown)ring-primary focus:border-primary' placeholder='阶段2名称'/>
<input type='number' min='0' class='w-24 px-4 py-2 border-t border-b border-gray-300 focus:ring-primary focus:border-primary' placeholder='积分'/>
<button class='p-2 border border-gray-300 rounded-r-lg bg-gray-50 hover:bg-gray-100'>
        <i class='fas fa-trash text-gray-500'>
        </i>
    </button>
    </div>
    </div>
<button type='button' class='mt-2 text-sm text-primary flex items-center'>
        <i class='fas fa-plus-circle mr-1'>
        </i>
添加阶段
    </button>
    </div>
    </div>
    </form>
    </div>
<div class='p-4 border-t flex justify-end space-x-3'>
        <button id='cancelTaskBtn' class='px-4 py-2 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors'>
        取消
    </button>
<button class='px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors'>
        发布任务
    </button>
    </div>
    </div>
    </div>
<script >// 页面加载时初始化
document.addEventListener('DOMContentLoaded', function () {
  // 初始化图表
  initCharts();

  // 初始化事件监听
  initEventListeners();
});

// 初始化图表
function initCharts() {
  // 任务完成情况图表
  var taskChart = echarts.init(document.getElementById('taskChart'));
  var taskOption = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisTick: {
        alignWithLabel: true
      }
    },
    yAxis: {
      type: 'value',
      name: '任务数'
    },
    series: [{
      name: '已完成',
      type: 'bar',
      barWidth: '60%',
      data: [3, 1, 4, 2, 5, 3, 2],
      itemStyle: {
        color: '#10B981'
      }
    }, {
      name: '待完成',
      type: 'bar',
      barWidth: '60%',
      data: [1, 2, 0, 1, 0, 2, 1],
      itemStyle: {
        color: '#F59E0B'
      }
    }],
    legend: {
      data: ['已完成', '待完成'],
      bottom: 0
    }
  };
  taskChart.setOption(taskOption);

  // 家庭成员贡献图表
  var memberChart = echarts.init(document.getElementById('memberChart'));
  var memberOption = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: 'center'
    },
    series: [{
      name: '任务完成数',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false,
        position: 'center'
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 16,
          fontWeight: 'bold'
        }
      },
      labelLine: {
        show: false
      },
      data: [{
        value: 8,
        name: '小明',
        itemStyle: {
          color: '#3B82F6'
        }
      }, {
        value: 10,
        name: '小红',
        itemStyle: {
          color: '#EC4899'
        }
      }, {
        value: 5,
        name: '爸爸',
        itemStyle: {
          color: '#6B7280'
        }
      }, {
        value: 7,
        name: '妈妈',
        itemStyle: {
          color: '#10B981'
        }
      }]
    }]
  };
  memberChart.setOption(memberOption);

  // 响应窗口大小变化
  window.addEventListener('resize', function () {
    taskChart.resize();
    memberChart.resize();
  });
}

// 初始化事件监听
function initEventListeners() {
  // 角色切换下拉菜单
  var roleToggle = document.getElementById('roleToggle');
  var roleDropdown = document.getElementById('roleDropdown');
  roleToggle.addEventListener('click', function () {
    roleDropdown.classList.toggle('hidden');
  });

  // 点击其他区域关闭下拉菜单
  document.addEventListener('click', function (e) {
    if (!roleToggle.contains(e.target) && !roleDropdown.contains(e.target)) {
      roleDropdown.classList.add('hidden');
    }
  });

  // 角色选择
  var roleOptions = document.querySelectorAll('.role-option');
  var currentRole = document.getElementById('currentRole');
  var parentMode = document.getElementById('parentMode');
  var childMode = document.getElementById('childMode');
  roleOptions.forEach(function (option) {
    option.addEventListener('click', function () {
      var role = option.getAttribute('data-role');
      currentRole.textContent = role === 'parent' ? '家长' : '孩子';
      roleDropdown.classList.add('hidden');

      // 切换模式显示
      if (role === 'parent') {
        parentMode.classList.remove('hidden');
        childMode.classList.add('hidden');
      } else {
        parentMode.classList.add('hidden');
        childMode.classList.remove('hidden');
      }

      // 重新调整图表大小
      window.dispatchEvent(new Event('resize'));
    });
  });

  // 发布任务模态框
  var createTaskBtn = document.getElementById('createTaskBtn');
  var taskModal = document.getElementById('taskModal');
  var cancelTaskBtn = document.getElementById('cancelTaskBtn');
  var closeModal = document.getElementById('closeModal');
  createTaskBtn.addEventListener('click', function () {
    taskModal.classList.remove('hidden');
    document.body.style.overflow = 'hidden'; // 防止背景滚动
  });
  function closeTaskModal() {
    taskModal.classList.add('hidden');
    document.body.style.overflow = ''; // 恢复背景滚动
  }
  cancelTaskBtn.addEventListener('click', closeTaskModal);
  closeModal.addEventListener('click', closeTaskModal);

  // 点击模态框外部关闭
  taskModal.addEventListener('click', function (e) {
    if (e.target === taskModal) {
      closeTaskModal();
    }
  });

  // 任务类型选择变化时显示/隐藏阶段配置
  var taskTypeSelect = document.querySelector('select');
  var stageConfig = document.getElementById('stageConfig');
  if (taskTypeSelect) {
    taskTypeSelect.addEventListener('change', function () {
      if (taskTypeSelect.value === '阶段性任务') {
        stageConfig.classList.remove('hidden');
      } else {
        stageConfig.classList.add('hidden');
      }
    });
  }
}</script>
    </body>
    </html>